<template>
    <div>
        <!-- 新增弹窗 -->
        <cvue-dialog :dialogVisible="dialogVisible"
            :dialogLoading="dialogLoading"
            title="新增"
            dialogWidth="500px"
            @handleOpen="getDetail"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="handleClose">
            <div class="dialog-body" slot="dialogBody">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="家长账号" prop="userName">
                                <el-input maxlength="11" v-model.trim="ruleForm.userName" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import cvueTable from '@/components/cvue-table'
import {validPhone, validIp} from '@/util/validator.js'
export default {
    name: 'indexAdd',
    components: {
        cvueDialog,
        cvueTable
    },
    data () {
        var checkPhone = (rule, value, callback) => {
            const reg = /^1[3456789]\d{9}$/
            if (!value) {
                callback(new Error('请输入手机号码'))
            } else if (!reg.test(value)) {
                callback(new Error('请输入正确的11位手机号码'))
            } else {
                var params = {
                    username: value
                }
                this.$store.dispatch('commonUser/CheckParentPhone', params).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        if (!res.data.exist) {
                            callback()
                        } else {
                            callback(new Error('该账号已注册'))
                        }
                    }
                    // else {
                    //     callback(new Error(res.msg))
                    // }
                })
            }
        }
        return {
            ruleForm: {
                userName: '',
                nickName: ''
            },
            rules: {
                userName: [
                     { trigger: 'blur', validator: checkPhone }
                ],
                nickName: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                ]
            },
            disabled: true,
            dialogLoading: false
        }
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    mounted () {
    },
    methods: {
        // 触发事件
        handleClose () {
            this.$refs['ruleForm'].clearValidate()
            this.$refs['ruleForm'].resetFields()
            this.$emit('handleClose')
        },
        closeDialog () {
            this.$refs['ruleForm'].clearValidate()
            this.$refs['ruleForm'].resetFields()
            this.$emit('closeDialog')
        },
        confirmDialog () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    var params = {
                        userName: this.ruleForm.userName
                    }
                    this.dialogLoading = true
                    // console.log(params)
                    this.$store.dispatch('commonUser/AddUserInfo', params).then(res => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.$message({
                                message: res.msg,
                                duration: 2000,
                                type: 'success'
                            })
                            this.$refs['ruleForm'].clearValidate()
                            this.$refs['ruleForm'].resetFields()
                            this.$emit('confirmDialog')
                        } else {
                            this.$message({
                                message: res.msg,
                                duration: 2000,
                                type: 'error'
                            })
                            this.dialogLoading = false
                        }
                    }).catch(err => {
                        console.log(err)
                        this.dialogLoading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 初始化弹窗
        getDetail () {
            this.dialogLoading = false
            this.ruleForm = {
                userName: '',
                nickName: ''
            }
        }
    }
}
</script>
<style scoped>
</style>
